<template>
  <div class="login-containerw">
    <el-row type="flex" justify="center" :gutter="20">
      <el-col :lg="14">
        <div class="login-form">
          <el-col :lg="12" :md="12" :xs="0">
            <div class="login-left">
                 
            </div>
          </el-col>

          <el-col :lg="12" :md="12" :xs="24">
            <div class="login-right">
              <!-- <div class="title-container">
              <h3 class="title">{{ sitaName }}</h3>
            </div> -->
              <div class="margin-top">
                <el-tabs v-model="loginFormType" @tab-click="handleTypeClick">
                  <el-tab-pane label="微信登录" name="qcordLog">
                    <Qcord />
                  </el-tab-pane>
                  <el-tab-pane label="账户登录" name="AccountLogin">
                    <account-login class="margin-top-sm" />
                  </el-tab-pane>
                  <el-tab-pane label="手机号登录" name="MobileLogin">
                    <mobile-login
                      :is_send_code="is_send_code"
                      class="margin-top-sm"
                    />
                  </el-tab-pane>
                  <!-- <el-tab-pane label="快捷登录" name="FastLogin">角色管理</el-tab-pane> -->
                </el-tabs>
              </div>

              <el-row :gutter="20" class="padding-lr-sm">
                <el-col :span="12" :offset="0">
                  <el-button
                    type="text"
                    style="color: #9b9b9b; font-size: 8px"
                    @click.native.prevent="handleRegister"
                    >免费注册</el-button
                  >
                </el-col>
                <el-col :span="12" :offset="0" class="text-right">
                  <el-button
                    type="text"
                    style="color: #9b9b9b; font-size: 8px"
                    @click.native.prevent="handleForget"
                    >忘记密码</el-button
                  >
                </el-col>
              </el-row>
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>
    <el-footer class="footer-login">
      <el-row>{{ website.footerleft }}</el-row>
      <el-row class="margin-top-xs"
        >{{ website.footerright }}
        <a href="https://beian.miit.gov.cn/" target="_block">{{
          website.icp
        }}</a></el-row
      >
    </el-footer>
  </div>
</template>

<script>
import { validUsername } from "@/utils/validate";
import SocialSign from "./components/SocialSignin";
import AccountLogin from "./components/AccountLogin";
import MobileLogin from "./components/MobileLogin";
import { config } from "@/utils/publicUtil";
import { getConfig } from "diandi-admin/lib/api/system/website.js";
import Qcord from "./components/Qcord";
import { getView } from "diandi-admin/lib/api/addons/store.js";
import { mapGetters } from 'vuex'

export default {
  name: "Login",
  components: {
    SocialSign,
    Qcord,
    AccountLogin,
    MobileLogin,
  },
  computed: {
    ...mapGetters([
      'size'
    ]),
  },
  data() {
    return {
      loginFormType: "qcordLog",
      sitaName: config.siteName,
      showDialog: false,
      is_send_code: false,
      website: {},
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true,
    },
  },
  created() {
    console.log('size',this.size)
    this.getConfigWebsite();

    // window.addEventListener('storage', this.afterQRScan)
  },
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    getConfigWebsite() {
      getConfig({}).then((res) => {
        if (res.code === 200) {
          this.is_send_code = Number(res.data.is_send_code);
          this.website = res.data;
          console.log("getConfigWebsite", res);
        }
      });
    },
    checkCapslock(e) {
      const { key } = e;
      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
    },
    handleTypeClick(tab, event) {
      if (this.loginFormType === "AccountLogin") {
      }
      console.log(tab, event, this.loginFormType);
    },
    qcordLog() {
      console.log("login");
      this.$router.push({ path: "/qcord" });
    },
    handleRegister() {
      this.$router.push({ path: "/register" });
    },
    handleForget() {
      this.$router.push({ path: "/forget" });
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },
    initStoreList: function (data) {
      const that = this;
      this.$store.dispatch("settings/setMenuType", data.module_name);
      if (data.store_id) {
        getView(data.store_id).then((res) => {
          that.$store.dispatch("app/setBlocs", res.data);
          that.$store.dispatch("elForm/changeSetting", {
            key: "attachmentUrl",
            value: res.data.config.attachmentUrl,
          });
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import './style/login.scss';
</style>
